<template>
  <div>
    <TopNav title="我的关注" @jumpPage="$router.push('/personal')" />
    <div v-if="followList.length">
      <FollowCell
        :follow="follow"
        v-for="follow in followList"
        :key="follow.id"
        @btnCancel="handleBtnCancel"
      />
    </div>
    <div v-else>
      <van-empty description="关注为空">
        <van-button>添加关注</van-button>
      </van-empty>
    </div>
    <PersonalCell
      label="回到个人中心"
      @clickJump="$router.push('/personal')"
      class="changeBd"
    />
  </div>
</template>

<script>
import TopNav from "../../components/TopNav";
import FollowCell from "../../components/FollowCell";
import PersonalCell from "../../components/PersonalCell";

export default {
  data() {
    return {
      followList: [],
    };
  },
  components: {
    TopNav,
    FollowCell,
    PersonalCell,
  },
  created() {
    // 刷新页面数据 显示关注列表
    this.follow();
  },
  methods: {
    //  发送请求 处理点击取消关注
    handleBtnCancel(id) {
      this.$axios({
        url: "/user_unfollow/" + id,
      })
        .then((res) => {
          // console.log(res);
          // 刷新页面数据 显示关注列表
          this.follow();
        })
        .catch((err) => {
          console.dir(err);
          this.$toast.fail("系统错误");
        });
    },
    // 封装关注列表显示函数，刷新页面更新列表
    follow() {
      //  发送请求 获取用户关注列表
      this.$axios({
        url: "/user_follows",
      })
        .then((res) => {
          //   console.log(res);

          // 提示
          //   将响应的数据绑定在data里
          this.followList = res.data.data;
          //   console.log(this.followList);
        })
        .catch((err) => {
          console.dir(err);
          this.$toast.fail("系统错误");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.changeBd {
  padding-left: 20/360 * 100vw;
  margin: 0;
}
</style>
